<template>
<!--会员中心-->
    <div class="vipcard">
<!--        <Header>-->
<!--            <i class="layui-icon layui-icon-left" @click="toprofile"></i>-->
<!--            <span>会员中心</span>-->
<!--        </Header>-->
      <Top><p>会员中心</p></Top>
       <div class="buy"><span>为账户</span><span>{{username}}</span><span>购买会员</span></div>
<!--会员特权-->
        <div class="vip_prerogative">
            <div class="header_style">
                <span class="header_left">会员特权</span>
                <div class="header_right">
                    <span>会员说明</span>
                    <i class="layui-icon layui-icon-right"></i>
                </div>
            </div>
            <!--减免-->
            <div class="vip_detail">
                <div class="vip_detail_left">
                    <i class="el-icon-present"></i>
                </div>
                <div class="vip_detail_right">
                     <h3>减免配送费</h3>
                    <p>每月减免30单，每日可减免3单，每单最高减4元</p>
                    <p>蜂鸟专送专享</p>
                </div>
            </div>

            <div class="vip_detail">
                <div class="vip_detail_left">
                    <i class="el-icon-box"></i>
                </div>
                <div class="vip_detail_right">
                    <h3>减免配送费</h3>
                    <p>每月减免30单，每日可减免3单，每单最高减4元</p>
                    <p>蜂鸟专送专享</p>
                </div>
            </div>


        </div>
<!--开通会员-->
        <div class="openvip">
            <div class="openheader">
                <p>开通会员</p>
            </div>
            <div class="money">
                <span>1个月</span>
                <span>￥20</span>
                <div class="tobuy" @click="topayment">
                    购买
                </div>
            </div>

        </div>

<!--兑换会员-->
        <div class="header_style givevip" @click="$router.push('/vip/usercart')">
            <span class="header_left">兑换会员</span>
            <div class="header_right">
                <span>卡号卡密</span>
                <i class="layui-icon layui-icon-right"></i>

            </div>
      </div>
<!--购买记录-->
        <div class="header_style record"  @click="$router.push('/vip/Fapiao')">
            <span class="header_left">购买记录</span>
            <div class="header_right">
                <span>开发票</span>
                <i class="layui-icon layui-icon-right"></i>
            </div>
        </div>
      <router-view></router-view>

    </div>



</template>

<script>
    // import Header from "../components/Header";
    import Top from "@/components/Top";
    export default {
        name: "Vipcard",
      components: {Top},
      data:function(){
          return{
             username:''
          }
        },
        // components: {Header},
        methods:{
            toprofile(){
                this.$router.push("/profile")
            },
            topayment(){
                this.$router.push("/ddpayment")
            }
        },

        created() {
            let minemessage=JSON.parse(localStorage.user);
            console.log(minemessage);
            this.minemessage=minemessage;
            console.log(this.minemessage);
            this.username=this.minemessage["username"];

        }
    }
</script>

<style scoped>
    .buy{
        height: 3rem;
        width: 23.4rem;
        line-height: 3rem;
        font-size: 1rem;
        color: #666;
    }
    .buy span:nth-of-type(1){
        margin-left: 1rem;

    }
    .buy span:nth-of-type(2){
        margin-left: 0.2rem;
        margin-right: 0.2rem;
        font-weight: bold;
        color: #333333;
    }
    .vip_prerogative {
        height: 13rem;
        width: 23.4rem;
        background-color: #fff;
        /*padding-left: .7rem;*/
        /*margin-bottom: .5rem;*/
    }
    .header_style{
        height: 2.5rem;
        /*display: flex;*/
        justify-content: space-between;
        background-color: #fff;
        line-height: 2.5rem;
        border-bottom: 1px solid #f5f5f5;
        padding-right: .7rem;
        position: relative;
    }
    .header_left{
        font-size: 1rem;
        margin-left: 1rem;
    }
    .header_style .header_right{
        position: absolute;
        left: 20rem;
        top: 0rem;
        align-items: center;
        /*float: left;*/
    }
    .header_style .header_right span{
        font-size: 1rem;
        color: #999;
        position: absolute;
        left: -4rem;
        top: 0rem;
        float: right;
        /*margin-right: .2rem;*/
    }
   .layui-icon-right{
        font-size: 1.2rem;
        position: absolute;
        left: 1rem;
        top: 0rem;
        color: rgb(187, 187, 187);

    }
    .vip_prerogative .vip_detail {
        display: flex;
        border-bottom: 1px solid #f5f5f5;
        padding: .8rem 0;
    }
    .vip_detail_left{
        margin-right: .6rem;
        margin-left: 1rem;
    }
    .el-icon-present,.el-icon-box{
        font-size: 3rem;
        color: #3190e8;
    }
    .vip_detail_right h3{
        font-size: 1rem;
        color: #333;
        font-weight: 400;
    }
    .vip_detail_right p{
        font-size: .5rem;
        color: #999;
    }
    .openvip{
        height: 5.8rem;
        width:23.4rem;
        background-color: white;
        margin-top: 1rem;
    }
    .openvip .openheader{
        height: 2.2rem;
        line-height: 2.2rem;
        /*margin-left: 1rem;*/
        border:1px solid #f5f5f5;
    }
    .openheader p{
        margin-left: 1rem;
    }
    .money{
        height: 3rem;
        position: relative;
    }
    .money span{
        line-height:3rem;
        font-size: 1.1rem;
    }
    .money span:nth-of-type(1){
        margin-left: 1rem;
        color: #333333;
    }
    .money span:nth-of-type(2){
        font-weight: bold;
        color:#f60;
    }
    .tobuy{
        height: 1.5rem;
        width: 3.5rem;
        border: 1px solid #f60 ;
        float: left;
        position: absolute;
        left:18rem;
        top:1rem;
        text-align: center;
        line-height: 1.5rem;
        border-radius: 5px;
        color:#f60;

    }
    .givevip,.record{
        margin-top: 1rem;
    }
   .givevip span{
  margin-right:0rem;
   }
</style>